import React, { useEffect, useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { homeRouter } from '../../router/routerConfig';
import { Checkbox } from 'antd';
import type { CheckboxProps } from 'antd';
import { Button, ConfigProvider, Flex, Popover } from 'antd';


import './css/index.css'
function index() {
    const router1 = homeRouter.slice(0, 4);

    const router2 = homeRouter.slice(4, 6);

    const [dataList1, setDataList1] = useState([
        {
            title: '工作台',
            children: [
                {
                    label: '最近打开'
                },
                {
                    label: '我的空间'
                }
            ]
        }
    ])
    const [dataList2, setDataList2] = useState([
        {
            title: '添加快捷访问',
            children: [
                {
                    id: 0,
                    label: '图片编辑',
                    checkB: true
                },
                {
                    id: 1,
                    label: 'AI抠图',
                    checkB: true
                },
                {
                    id: 2,
                    label: 'AI 文本',
                    checkB: false
                },
                {
                    id: 3,
                    label: 'AI 表格',
                    checkB: false
                }
            ]
        }
    ])

    // 控制划入划出的加号
    const [addSpen, setAddSpen] = useState(false);
    // 控制划入划出的减号
    const [delSpen, setDelSpen] = useState(false);

    const [idCheck, setId] = useState(0);
    // 下拉菜单里面的数据
    const [xlList, setXllist] = useState([
        {
            id: 0,
            label: '图片编辑',
            checkB: true
        },
        {
            id: 1,
            label: 'AI抠图',
            checkB: true
        },
        {
            id: 2,
            label: 'AI 文本',
            checkB: false
        },
        {
            id: 3,
            label: 'AI 表格',
            checkB: false
        }
    ]);
    useEffect(() => {

    }, [])
    const checkOn = (item: any) => {
        setId(item.id);
        if (item.checkB === true) {
            item.checkB = false;
            dataList2[0].children.forEach((v, i) => {
                if (v.id === item.id) {
                    dataList2[0].children.splice(i, 1)
                }
            })
            setDataList2(dataList2)
        } else {
            item.checkB = true;
            dataList2[0].children.push(item);
            setDataList2(dataList2)
        }

        console.log(xlList);

    }
    console.log(idCheck);
    // 删除这个最近
    const delData2 = (item: any) => {
        dataList2[0].children.forEach((v, i) => {
            if (v.id === item.id) {
                dataList2[0].children.splice(i, 1)
            }
        })
        setDataList2(dataList2)
    }
    const content = (
        <div className='xl'>

            {
                xlList.map((item, index) => {
                    return <p key={index}>
                        <p style={{ marginLeft: '20px', marginTop: "10px" }}><Checkbox defaultChecked={item.checkB} onClick={() => checkOn(item)}></Checkbox>{item.label}</p>
                    </p>
                })
            }


        </div>
    );
    return (
        <div className="top">
            <ul>
                {
                    router1.map((item, index) => {
                        return <li key={index}>
                            <NavLink className="nav-link" to={item.path}>{item.title}</NavLink>
                        </li>
                    })
                }
            </ul>
            <ul>
                {
                    dataList1.map((item, index) => {
                        return <div key={index} >
                            <p style={{ marginLeft: '20px' }}> {item.title}</p>

                            {
                                item.children.map((i, v) => {
                                    return <li key={v}>
                                        {i.label}
                                    </li>
                                })
                            }
                        </div>
                    })
                }
            </ul>

            <ul>
                {
                    dataList2.map((item, index) => {
                        return <div key={index}
                            onMouseEnter={() => setAddSpen(true)}
                            onMouseLeave={() => setAddSpen(false)}
                        >
                            <div style={{ height: "50px", marginLeft: '20px', lineHeight: '50px' }}> {item.title}
                                <span style={{ visibility: addSpen ? 'visible' : 'hidden', backgroundColor: '#fff', }} >
                                    <Flex align="center" vertical>
                                        <Popover placement="rightTop" content={content}>
                                            <b>+</b>
                                        </Popover>
                                    </Flex>
                                </span>
                            </div>


                            {
                                item.children.filter(item => item.checkB).map((i, v) => {
                                    return <li key={v} onMouseEnter={() => setDelSpen(true)}
                                        onMouseLeave={() => setDelSpen(false)}>
                                        {i.label} <span style={{ visibility: delSpen ? 'visible' : 'hidden' }} onClick={() => delData2(i)}>x</span>
                                    </li>
                                })
                            }
                        </div>
                    })
                }
            </ul>
            <ul>
                <p style={{ marginLeft: '20px' }}>创建设计</p>
                {
                    router2.map((item, index) => {
                        return <div key={index}>

                            <li>
                                <NavLink className="nav-link" to={item.path}>{item.title}</NavLink>
                            </li>
                        </div>

                    })
                }
            </ul>
        </div>
    )
}

export default index






// import React, { useState } from 'react'
// import { NavLink, Outlet, useNavigate } from 'react-router-dom'
// import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
// import type { MenuProps } from 'antd';
// import { Menu } from 'antd';
// import './Index/Index.css'
// import { routeChildren } from '../router/routerView';


// type MenuItem = Required<MenuProps>['items'][number];

// const items: MenuItem[] = [
//   {
//     key: 'g1',
//     label: '工作台',
//     type: 'group',
//     children: [
//       { key: '1', label: '最近打开' },
//       { key: '2', label: '我的空间' },
//     ],
//   },
//   {
//     key: 'g1',
//     label: '添加快捷方式',
//     type: 'group',
//     children: [
//       { key: '1', label: '图片编辑' },
//       { key: '2', label: '快速拼图' },
//     ],
//   },
//   {
//     key: 'g1',
//     label: '创建设计',
//     type: 'group',
//     children: [
//       { key: '1', label: '设计工具' },
//       { key: '2', label: '打开本地' },
//     ],
//   },
// ];

// const itemss: MenuItem[] = routeChildren.map((item: any) => ({ key: item.path, label: item.title }));
// console.log(itemss);
// itemss.push(items[0])
// function index() {
//   const [eKey, setEkey] = useState('');
//   const navigate = useNavigate();
//   const onClick: MenuProps['onClick'] = (e: any) => {
//     console.log('click ', e);
//     setEkey(e.key);
//     navigate(e.key)
//   };
//   console.log(routeChildren);
//   const eKeyList = itemss.find((item)=>item.key === eKey);
// console.log(eKeyList);

//   return (
//     <div className='box'>
//       <header>头部</header>
//       <main>
//         <div className="left">
//           <Menu
//             onClick={onClick}
//             style={{ width: 256 }}
//             defaultSelectedKeys={['1']}
//             defaultOpenKeys={['sub1']}
//             mode="inline"
//             items={itemss}
//           />
//         </div>
//         <div className="right">
//           首页
//           <Outlet></Outlet>
//         </div>
//       </main>

//     </div>
//   )
// }

// export default index